<template>
    <div id="line" style="width: 100%; height: 25vh"></div>
</template>

<script>
/* eslint-disable */
// import request from '@/network/request'
import * as echarts from 'echarts';
    export default {
        name: "trendAnalysis",
      data() {
        return {
          timer: null,
          weekTranslate: {
            Monday: '星期一',
            Tuesday: '星期二',
            Wednesday: '星期三',
            Thursday: '星期四',
            Friday: '星期五',
            Saturday: '星期六',
            Sunday: '星期日'
          },
          option: {
            title: {
              show: true,
              text: '告警趋势分析',
              textStyle: {
                color: '#fff'
              }
            },
            tooltip: {
              trigger: 'axis'
            },
            legend: {
              data: ['一级告警', '二级告警'],
              textStyle: {
                color: ['#c23531', '#61a0a0']
              }
            },
            xAxis: {
              splitLine: {
                show: false
              },
              type: 'category',
              boundaryGap: false,
              data: [],
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 1, //这里是为了突出显示加上的
                }
              },
            },
            yAxis: {
              splitLine: {
                show: false
              },
              type: 'value',
              min: 0,
              max: 200,
              interval: 100,
              axisLine: {
                lineStyle: {
                  color: '#fff',
                  width: 1, //这里是为了突出显示加上的
                }
              },
            },
            series: [
              {
                name: '一级告警',
                type: 'line',
                data: [],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#c23531'
                    }
                  }
                }
              },
              {
                name: '二级告警',
                type: 'line',
                data: [],
                itemStyle: {
                  normal: {
                    lineStyle: {
                      color: '#61a0a0'
                    }
                  }
                }
              }
            ]
          }
        }
      },
      methods: {
          createLineChart() {
            var chartDom = document.getElementById('line')
            var lineChart = echarts.init(chartDom)
            this.option.series[0].data = []
            this.option.series[1].data = []
            this.option.xAxis.data = []
            // request({
            //   url: '/dataOp/getOneWeekCount',
            //   method: 'GET'
            // }).then((res) => {
            //   for (let item in res.data.data.allCount[0].alarmCountEveryDay) {
            //     this.option.xAxis.data.push(item)
            //     this.option.series[0].data.push(res.data.data.allCount[0].alarmCountEveryDay[item])
            //   }
            //   for (let item in res.data.data.allCount[1].alarmCountEveryDay) {
            //     this.option.series[1].data.push(res.data.data.allCount[1].alarmCountEveryDay[item])
            //   }
            //   var topMax = Math.max(...this.option.series[0].data)
            //   var topMin = Math.min(...this.option.series[0].data)
            //   var secondMax = Math.max(...this.option.series[1].data)
            //   var secondMin = Math.min(...this.option.series[1].data)
            //   if (topMax >= secondMax) {
            //     this.option.yAxis.max = Math.ceil(topMax * 1.2)
            //   } else {
            //     this.option.yAxis.max = Math.ceil(secondMax * 1.2)
            //   }
            //   if (topMin <= secondMin) {
            //     this.option.yAxis.min = Math.floor(topMin * 0.5)
            //   } else {
            //     this.option.yAxis.min = Math.floor(secondMin * 0.5)
            //   }
            //   this.option.yAxis.interval = Math.ceil((this.option.yAxis.min + this.option.yAxis.max) / 2)
            //   this.option && lineChart.setOption(this.option)
            // })

          }
      },
      mounted() {
        this.createLineChart()
        this.timer = setInterval(() => {
          this.createLineChart()
        }, 10000)
      },
      beforeDestroy() {
          clearInterval(this.timer)
      }
    }
/* eslint-disable */
</script>

<style scoped>

</style>
